import { defineStore } from 'pinia'

export const useStyleStore = defineStore('style', {
  state: () => ({
    // 主题
    theme: 'bright' as 'bright' | 'dark',
    themeStyle: {
      bright: {
        // 基础区域
        backgroundColor1: '#FFFFFF', // 纯白背景
        btnHoverColor1: '#F7F9FC', // 悬停浅蓝灰
        borderColor1: '#E4E7ED', // 柔和浅灰边框
        textColor1: '#1D2129', // 深灰文字（高可读）

        // 次级区域
        backgroundColor2: '#F2F6FC', // 极浅蓝背景
        btnHoverColor2: '#EDF2FF', // 悬停浅蓝色
        borderColor2: '#DCDFE6', // 中性浅灰边框
        textColor2: '#4E5969', // 中灰文字

        // 特殊组件
        backgroundColor3: '#F9FBFD', // 浅蓝灰背景
        btnHoverColor3: '#e8eff9', // 悬停浅蓝灰
        borderColor3: '#EBEEF5', // 极浅蓝灰边框
        buttonColor1: '#FFFFFF', // 白色按钮
        buttonColor2: '#F7F9FC', // 浅灰按钮
        textColor3: '#1D2129' // 深灰文字
      },
      dark: {
        // 基础区域
        backgroundColor1: '#1A1D24', // 深灰蓝背景
        btnHoverColor1: '#2A2F3D', // 悬停深蓝灰
        borderColor1: '#363C48', // 金属灰边框
        textColor1: '#E6E9F0', // 浅灰文字

        // 次级区域
        backgroundColor2: '#21252E', // 蓝黑背景
        btnHoverColor2: '#2F3645', // 悬停深蓝
        borderColor2: '#3D4452', // 深灰蓝边框
        textColor2: '#B4BAC5', // 中灰文字

        // 特殊组件
        backgroundColor3: '#191C22', // 接近黑色背景
        btnHoverColor3: '#191C22', // 悬停浅蓝灰
        borderColor3: '#3D4452', // 深灰蓝边框
        buttonColor1: '#2A2F3D', // 深灰蓝按钮
        buttonColor2: '#21252E', // 蓝黑按钮
        textColor3: '#E6E9F0' // 浅灰文字
      }
    },

    /**
     * 资源栏，消息栏，属性栏的ref
     */
    resourceRef: null as any,
    messageRef: null as any,
    attributeRef: null as any,

    /**
     * 代码编辑器样式
     */
    codeEditorStyle: {
      rules: [
        // 基本语法元素
        { token: 'comment', foreground: '7f848e' }, // 注释
        { token: 'string', foreground: '89ca78' }, // 字符串
        { token: 'keyword', foreground: 'ca5fbc' }, // 关键字（加粗）
        { token: 'number', foreground: 'B5CEA8' }, // 数字

        // 特定语言元素（以TypeScript为例）
        { token: 'type', foreground: 'e5c071' }, // 类型（如接口、类名）
        { token: 'function', foreground: '000000' }, // 函数名
        { token: 'variable', foreground: 'FF0000' }, // 变量
        { token: 'property', foreground: 'FF0000' }, // 对象属性
        { token: 'operator', foreground: 'ef596f' }, // 操作符

        { token: 'identifier', foreground: 'ef596f' },
        { token: 'delimiter', foreground: 'D4D4D4' }
      ],
      colors: {
        'editor.background': '#1E1E1E',
        'editor.foreground': '#D4D4D4',
        'editor.lineHighlightBackground': '#2D2D2D',
        'editorLineNumber.foreground': '#858585',
        'editorLineNumber.activeForeground': '#C6C6C6',
        'editorCursor.foreground': '#AEAFAD',
        'editor.selectionBackground': '#264F78',
        'editor.selectionHighlightBackground': '#264F7840',
        'editor.findMatchBackground': '#515C6A',
        'editor.findMatchHighlightBackground': '#EA5C0040',
        'editorGutter.background': '#1E1E1E',
        'editorIndentGuide.background': '#404040',
        'editorIndentGuide.activeBackground': '#707070',
        'editorBracketMatch.border': '#888888',
        'editorBracketMatch.background': '#00640040',
        'scrollbarSlider.background': '#3C3C3C',
        'scrollbarSlider.hoverBackground': '#4A4A4A',
        'scrollbarSlider.activeBackground': '#5A5A5A',
        'editorWidget.background': '#252526',
        'editorWidget.border': '#454545',
        'editorHoverWidget.background': '#252526',
        'editorHoverWidget.border': '#454545',
        'editorSuggestWidget.background': '#252526',
        'editorSuggestWidget.border': '#454545',
        'editorSuggestWidget.selectedBackground': '#2A2D2E',
        'editorSuggestWidget.highlightForeground': '#4A6CF7'
      }
    }
  }),
  actions: {
    //改变资源栏
    resizeResource(size: number) {
      //获取资源栏dom元素
      const resourceHtml = document.getElementById('resource-bar') as HTMLElement
      resourceHtml.style.transition = 'all 0.3s linear'
      this.resourceRef && this.resourceRef.resize(size)

      setTimeout(() => {
        resourceHtml.style.transition = 'none'
      }, 300)
    },
    //改变消息栏
    resizeMessage(size: number) {
      //获取消息栏dom元素
      const messageHtml = document.getElementById('middle-message') as HTMLElement
      messageHtml.style.transition = 'all 0.3s linear'
      this.messageRef && this.messageRef.resize(size)
      setTimeout(() => {
        messageHtml.style.transition = 'none'
      }, 300)
    },
    //改变属性栏
    resizeAttribute(size: number) {
      //获取属性栏dom元素
      const attributeHtml = document.getElementById('attribute-bar') as HTMLElement
      attributeHtml.style.transition = 'all 0.3s linear'
      this.attributeRef && this.attributeRef.resize(size)
      setTimeout(() => {
        attributeHtml.style.transition = 'none'
      }, 300)
    }
  }
})
